<template>
  <div id="echartContainer4">
    <el-table
      :data="rowData"
      ref="table"
      :row-style="{height:0+'px'}"
      :cell-style="{padding:0+'px'}"
      style="width: 100%">

      <el-table-column

        label="地区"
        width="200">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column
        label="招聘量"
      >
        <template slot-scope="scope">
          {{scope.row.positionCount}}
        </template>
      </el-table-column>

      <el-table-column

        label="企业数">
        <template slot-scope="scope">
          {{scope.row.companyCount}}
        </template>
      </el-table-column>

      <el-table-column

        label="平均薪资">
        <template slot-scope="scope">
          {{scope.row.salaryAvg}}
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  export default {
    name: "component4",
    props: {
      tabledata: {
        default: function () {
          return [
            {name: '京东城区', positionCount: '190', companyCount: '179', salaryAvg: '16800'},
            {name: '州西城区', positionCount: '180', companyCount: '179', salaryAvg: '16800'},
            {name: '海静安区', positionCount: '170', companyCount: '179', salaryAvg: '16800'},
            {name: '海西城区', positionCount: '150', companyCount: '179', salaryAvg: '16800'},
            {name: '州五羊区', positionCount: '140', companyCount: '179', salaryAvg: '16800'}
            // 请将positionCount从大到小排序, positionCount相同的按照salaryAvg从小到大排序
          ]
        }
      }
    },
    data() {
      return {
        rowData: []
      }
    },
    methods: {
      initTable() {
        //延时器始终会最后执行：DOM渲染过程，tableData为空，
        //或者为undefined也有可能中途数据发生了变化导致tableData为空
        setTimeout(() => {
          console.log("init tableData");
          this.rowData = this.tabledata;
          this.$refs.table.doLayout();
        })

      }
    },
    mounted() {
      this.initTable();
    },
    watch: {
      tabledata: function () {
        console.info("Tabledata Changed");
        this.initTable();
      }

    }

  }
</script>

<style lang="scss">
  #echartContainer4 {
    width: 100%;
    height: 100%;
    max-height: 250px;
    /* 使表格背景透明 */

    .el-table, .el-table__expanded-cell {
      background-color: transparent;
      height: 100%;
      width: 100%;
      color: white;
    }

    .el-table th, .el-table tr {
      background-color: transparent;
      height: 20%;
    }

    .el-table__row > td {
      border: none;
    }

    .el-table::before {
      /*去掉最下面的那一条线*/
      height: 0;
    }
  }


</style>
